/*!
 * @copyright 2009-2019 Vanilla Forums Inc.
 * @license GPL-2.0-only
 */

/* -------------------------------------------------------------- *\
    Utility Variables
\* -------------------------------------------------------------- */

@use "sass:math";

$utility-baseUnit: 6px;
$utility-baseUnitHalf: $utility-baseUnit * 0.5; // Derived
$utility-baseUnitDouble: $utility-baseUnit * 2; // Derived
$utility-percentage_third: math.div(100%, 3);
$utility-percentage_nineSixteenths: (math.div(9, 16) * 100%);
$utility-SVGEncoding: "data:image/svg+xml,";

/* -------------------------------------------------------------- *\
    Globals
\* -------------------------------------------------------------- */

$global-color_black: #000;
$global-color_white: #fff;
$global-color_transparent: transparent;
$global-color_fg: #555a62 !default;
$global-color_bg: #fff !default;
$global-color_primary: #0291db !default;
$global-color_secondary: darken($global-color_primary, 10%) !default; // Derived
$global-color_warning: #ffce00 !default;

$global-error_fg: #ff3933 !default;
$global-error_bg: mix($global-error_fg, $global-color_bg, 10%) !default; // Derived

$global-color_confirm: #60bd68 !default;
$global-color_unresolved: mix($global-color_warning, $global-color_fg, 10%) !default; // Resolved

$global-body_bg: $global-color_bg !default; // Derived - color outside main content in margins

$global-border_color: mix(
    $global-color_fg,
    $global-color_bg,
    24%
) !default; // Note it's off by default due to the border width
$global-border-width: 1px;
$global-border-style: solid;
$global_borderRadius: 6px !default;

/* -------------------------------------------------------------- *\
    States
\* -------------------------------------------------------------- */

$state-icon_opacity: 0.6;
$state-text_opacity: 0.75;

$state-hover_color: mix($global-color_primary, $global-color_bg, 10%) !default; // rgba(174, 228, 255, 0.2);
$state-hover_opacity: 1 !default;

$state-focus_color: mix($global-color_primary, $global-color_bg, 12%) !default; // rgba(174, 228, 255, 0.4);
$state-focus_opacity: 1 !default;
$state-focus_outline: none !default;

$global-color_active_primaryBg: rgba($global-color_primary, 0.05) !default; // Derived
$state-active_color: mix($global-color_primary, $global-color_bg, 95%) !default; // #0075f5
$state-active_opacity: 1 !default;

/* -------------------------------------------------------------- *\
    Password Strength Colors
\* -------------------------------------------------------------- */

$passwordStrength-level1_color: #c81818 !default;
$passwordStrength-level2_color: #ff891d !default;
$passwordStrength-level3_color: #ffac1d !default;
$passwordStrength-level4_color: #5db112 !default;
$passwordStrength-level5_color: #27b30f !default;
$passwordStrength-bg: mix($global-error_bg, $global-error_fg, 80%) !default; // Derived

/* -------------------------------------------------------------- *\
    Third Party Colors
\* -------------------------------------------------------------- */

$global-color_facebook: #3b5998;
$global-color_twitter: #00b6f1;
$global-color_youTube: #b31217;
$global-color_pinterest: #cb2027;
$global-color_googlePlus: #df4a32;
$global-color_tumblr: #2c4762;
$global-color_stumbleUpon: #eb4924;
$global-color_reddit: #ff5700;
$global-color_vine: #00b489;
$global-color_discord: #7289da;
$global-color_instagram: #bc2a8d;
$global-color_linkedIn: #007bb6;

/* -------------------------------------------------------------- *\
    Typography
\* -------------------------------------------------------------- */

$global-large_fontSize: 16px !default;
$global-medium_fontSize: 14px !default;
$global-small_fontSize: 12px !default;

$global-title_fontSize: 32px !default;
$global-smallTitle_fontSize: 20px !default;
$global-title_mobile_fontSize: 26px !default;
$global-subTitle_fontSize: 18px !default;

$userContent_fontSize: $global-medium_fontSize !default; // 14 for forums, but 16 for KB
$userContent-fontSizeH1: 2em !default;
$userContent-fontSizeH2: 1.5em !default;
$userContent-fontSizeH3: 1.25em !default;
$userContent-fontSizeH4: 1em !default;
$userContent-fontSizeH5: 0.875em !default;
$userContent-fontSizeH6: 0.85em !default;

$global-heading_topMargin: 1.5 * $global-medium_fontSize;

$global-fontWeight_normal: 400 !default;
$global-fontWeight_semiBold: 600 !default;
$global-fontWeight_bold: 700 !default;

$global-block_margin: $userContent_fontSize !default;

$global-base_lineHeight: 1.5 !default;
$global-condensed_lineHeight: 1.25 !default;
$global-code_lineHeight: 1.45 !default;
$global-excerpt_lineHeight: 1.45 !default;

$global_spacer: $userContent_fontSize * $global-base_lineHeight;

$global-heading_fontFamily: "Open Sans", HelveticaNeue-Light, "Segoe UI", "Helvetica Neue", Helvetica, Raleway, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !default;
$global-heading_fontWeight: $global-fontWeight_bold !default; // Derived
$global-heading_lineHeightRatio: 0.91;

$global-body_fontFamily: "Open Sans", "Segoe UI", "Helvetica Neue", Helvetica, Raleway, Arial, sans-serif !default;
$global-body_fontWeight: $global-fontWeight_normal !default; // Derived
$global-body_lineHeightRatio: $global-heading_lineHeightRatio;

$link-default_color: $global-color_primary !default;
$link-default_hover_color: $global-color_secondary !default;
$link-default_focus_color: $global-color_secondary !default;
$link-default_visited_color: mix($global-color_secondary, $global-color_fg, 90%) !default;

/* -------------------------------------------------------------- *\
    Animation
\* -------------------------------------------------------------- */

$global-default_timing: 0.15s !default;
$global-default_easing: ease-out !default;

/* -------------------------------------------------------------- *\
    Icons
\* -------------------------------------------------------------- */

$icon-large_size: 32px !default;
$icon-default_size: 24px !default;
$icon-small_size: 16px !default;
$icon_color: mix($global-color_bg, $global-color_fg, 18%) !default;

/* -------------------------------------------------------------- *\
    User Photo
\* -------------------------------------------------------------- */

$userPhoto_borderRadius: 50%;
$userPhoto-small_width: 28px;
$userPhoto-medium_width: 40px;
$userPhoto-large_width: 100px;

/* -------------------------------------------------------------- *\
    Layout
\* -------------------------------------------------------------- */

$global-gutter_size: 24px;
$global-gutter_halfSize: $global-gutter_size * 0.5;
$global-gutter_quarterSize: $global-gutter_size * 0.25;

$global-panel_width: 216px !default;
$global-panel_paddedWidth: $global-panel_width + $global-gutter_size * 2 !default;

$global-middleColumn_width: 672px;
$global-middleColumn_paddedWidth: $global-middleColumn_width + $global-gutter_size;

$global-content_width: $global-panel_paddedWidth * 2 + $global-middleColumn_paddedWidth + $global-gutter_size * 3; // *3 from margin between columns and half margin on .container

$global-twoColumn_breakpoint: 1200px !default; // Generic breakpoint for 2 columns
$global-xs_breakpoint: 500px !default;

// Hard coded columns
$evenColumns_breakpoint: $global-twoColumn_breakpoint !default;
$evenColumns-threeColumns-breakToOne: $evenColumns_breakpoint !default;

// Uses CSS Columns
$flexColumns-twoColumns_breakToOne: $global-twoColumn_breakpoint !default;
$flexColumns-threeColumns_breakToTwo: $global-twoColumn_breakpoint !default;
$flexColumns-threeColumns_breakToOne: 500px !default;

/* -------------------------------------------------------------- *\
    Components
\* -------------------------------------------------------------- */

$component_bg: mix($global-color_bg, $global-color_fg, 97%) !default;
$component-titleBar_bg: mix($global-color_bg, $global-color_fg, 93%) !default;
$component-body_bg: $component_bg !default;
$component-well_bg: $global-color_bg !default;

$component-separator: $utility-baseUnit * 2 !default;
$component-spacing: 27px !default;
$component-spacing_half: $component-spacing * 0.5 !default;
$component-viewAll_bg: $component_bg !default;

$component-titleBar_verticalPadding: $component-spacing_half !default;
$component-titleBar_minHeight: 60px;
$component-titleBar_countBg: mix($global-color_bg, $global-color_fg, 88%) !default;
$component-titleBar_viewMoreColor: mix($global-color_bg, $global-color_fg, 60%) !default;

/* -------------------------------------------------------------- *\
    Form Elements
\* -------------------------------------------------------------- */

$formElement_borderWidth: 1px !default;
$formElement_fullBorderWidth: $formElement_borderWidth * 2;
$formElement_height: $utility-baseUnit * 6; // Derived
$formElement_margin: $utility-baseUnit * 2; // Derived
$formElement_heightWithBorder: $formElement_height + 2 * $formElement_borderWidth; // Derived
$formElement_borderColor: $global-border_color !default; // Derived
$formElement_borderStyle: solid;
$formElement_borderRadius: $global_borderRadius !default;

// For Home Page
$formElement_giantInput_height: 82px !default;
$formElement_giantInput_fontSize: 24px !default;

// For Search
$formElement_largeInput_height: 40px !default;
$formElement_largeInput_fontSize: 16px !default;

$formElement_halfHeight: $formElement_height * 0.5 !default; // Derived
$formElement-borderWidthFull: $formElement_borderWidth * 2 !default; // Derived
$formElement_horizontalPadding: $utility-baseUnit * 2 !default; // Derived
$formElement_paddingVertical: $utility-baseUnit !default; // Derived
$formElement_placeholderColor: mix($global-color_fg, $global-color_bg, 50%) !default; // Derived
$formElement_maxWidth: 528px !default;
$formElement_fg: mix($global-color_fg, $global-color_bg, 80%) !default; // Derived
$formElement_bg: $global-color_bg !default;
$formElement_miniInput_width: 100px !default;

$global-formNote_fg: mix($global-color_fg, $global-color_bg, 72%) !default; // Derived
$global-formNoteLink_fg: $global-color_primary !default; // Derived

$global-selectBox_height: $utility-baseUnit * 4 !default; // Derived

$global-textArea_minHeight: 100px !default;
$global-textArea_padding: $utility-baseUnit !default;

$global-fileUpload_bg: $global-color_primary !default;
$global-fileUpload_fg: $global-color_white !default;
$global-fileUpload_hover_bg: mix($global-color_primary, $global-color_fg, 20%) !default;

$formElement-panel_shadowColor: rgba($global-color_fg, 0.2) !default;
$formElement-panel_boxShadow: 0 1px 3px 0 $formElement-panel_shadowColor !default;

$formElement-disabled_opacity: 0.5 !default;

$buttonToIconMargin: ($formElement_height - $icon_default_size) * 0.5; // To align sides of icon with padding of parent

/* -------------------------------------------------------------- *\
    Overlays (Menus, flyouts and Modals)
\* -------------------------------------------------------------- */

@function getBlackOrWhiteBasedOnColor($color) {
    @if (lightness($color) > 50) {
        @return white; // Lighter background
    } @else {
        @return black; // Darker background
    }
}

$overlay_bgColor: rgba(getBlackOrWhiteBasedOnColor($global-color_fg), 0.4) !default;
$overlay-dropShadow_color: $overlay_bgColor !default;
$overlay-border_color: mix($global-color_fg, $global-color_bg, 15%) !default;
$overlay-dropShadow: 0 5px 10px $overlay_bgColor !default;
$overlay-borderRadius: $global_borderRadius !default;
$overlay-fullPageHeading_spacer: 32px;

/* -------------------------------------------------------------- *\
    Buttons
\* -------------------------------------------------------------- */

// Icon Button Size

$buttonIcon_size: 36px !default;

$buttonIcon-iconPadding_offset: ($buttonIcon_size - $icon-default_size) * 0.5;

// Global Button options

$global-button_paddingTop: 2px !default;
$global-button_paddingBottom: 3px !default;
$global-button_paddingSide: $utility-baseUnit !default;
$global-button_minWidth: 16 * $utility-baseUnit !default; // Derived
$global-button_radius: $global_borderRadius !default;

$buttonBar_margin: $utility-baseUnit * 2 !default; // Derived

// Basic Button

$button-basic_fg: $global-color_fg !default;
$button-basic_bg: $global-color_bg !default;
$button-basic_border: mix($global-color_fg, $global-color_bg, 24%) !default;

$button-basic_hover_fg: $button-basic_fg !default;
$button-basic_hover_bg: $global-color_bg !default;
$button-basic_hover_border: mix($global-color_bg, $global-color_fg, 40%) !default;

$button-basic_focus_fg: $global-color_fg !default;
$button-basic_focus_bg: $button-basic_hover_bg !default;
$button-basic_focus_border: rgba($global-color_primary, 0.8) !default;

$button-basic: (
    default: (
        color: $button-basic_fg,
        background-color: $button-basic_bg,
        border-color: $button-basic_border,
    ),
    hover: (
        color: $button-basic_hover_fg,
        background-color: $button-basic_hover_bg,
        border-color: $button-basic_hover_border,
    ),
    focus: (
        color: $button-basic_focus_fg,
        background-color: $button-basic_focus_bg,
        border-color: $button-basic_focus_border,
    ),
) !default;

// Button Primary

$button-primary_fg: $global-color_white !default;
$button-primary_bg: $global-color_primary !default;
$button-primary_border: $global-color_primary !default;

$button-primary_hover_fg: $global-color_white !default;
$button-primary_hover_bg: $global-color_secondary !default;
$button-primary_hover_border: $global-color_secondary !default;

$button-primary_focus_fg: $global-color_white !default;
$button-primary_focus_bg: $global-color_secondary !default;
$button-primary_focus_border: $global-color_secondary !default;

$buttonPrimary: (
    default: (
        color: $button-primary_fg,
        background-color: $button-primary_bg,
        border-color: $button-primary_border,
    ),
    hover: (
        color: $button-primary_hover_fg,
        background-color: $button-primary_hover_bg,
        border-color: $button-primary_hover_border,
    ),
    focus: (
        color: $button-primary_focus_fg,
        background-color: $button-primary_focus_bg,
        border-color: $button-primary_focus_border,
    ),
) !default;

/* -------------------------------------------------------------- *\
      Meta
\* -------------------------------------------------------------- */

$metaText_fontSize: $global-small_fontSize;
$metaText_color: mix($global-color_fg, $global-color_bg, 85%) !default;
$metaText_margin: 4px !default;

$metas_verticalMargin: $utility-baseUnit * 2;
$metas_color: $metaText_color !default;
$meta_spacing: $global-gutter_quarterSize;
$meta_lineHeight: $global-base_lineHeight;
$meta-deleted_color: #d0021b;

/* -------------------------------------------------------------- *\
      Thumbnails
\* -------------------------------------------------------------- */

$thumbnail-border_color: mix($global-color_fg, $global-color_bg, 10%) !default; // Derived
$thumbnail-border_width: 0;

/* -------------------------------------------------------------- *\
    Separators
\* -------------------------------------------------------------- */

$global-separator_color: mix($global-color_fg, $global-color_bg, 10%) !default;
$global-separator_width: 1px;

/* -------------------------------------------------------------- *\
    SelectBox
\* -------------------------------------------------------------- */

$selectBox-separator_height: 1px !default;
$selectBox-separator_margin: 6px !default;
$selectBox-separator_color: $global-separator_color !default;

/* -------------------------------------------------------------- *\
    DropDown
\* -------------------------------------------------------------- */

$dropDown_width: 250px;
$dropDown_borderRadius: 1px;
$dropDown_bg: $global-color_bg;

$dropDown-metas_verticalPadding: 6px;
$dropDown-metas_horizontalPadding: 18px;

$dropDown-item_verticalPadding: 6px;
$dropDown-item_horizontalPadding: 18px;

$dropDown-item_minHeight: 30px;
$dropDown-item_mobile_minHeight: 44px;

$dropDown-item_mobile_fontSize: 16px;

/* -------------------------------------------------------------- *\
    Header
\* -------------------------------------------------------------- */
@function getBgDependingOnContrastColor($fgColor, $colorToModify, $mixAmount, $flip: false) {
    @if (lightness($fgColor) > 50 and not $flip) {
        @return mix(#000, $colorToModify, $mixAmount); // Light text, so darken color
    } @else {
        @return mix(#fff, $colorToModify, $mixAmount); // Light text, so darken color
    }
}

$vanillaHeader_height: 48px !default;
$vanillaHeader_mobile_height: 44px !default;
$vanillaHeader_fg: $global-color_bg !default;
$vanillaHeader_bg: $global-color_primary !default;
$vanillaHeader-spacer_width: 12px;

$vanillaHeader-button_borderRadius: 3px;
$vanillaHeader-button_size: 40px;

$vanillaMenu-guest_spacer: 8px !default;
$vanillaMenu-signIn_bg: getBgDependingOnContrastColor($vanillaHeader_fg, $global-color_primary, 10%) !default;
$vanillaMenu-signIn_bg_hover: getBgDependingOnContrastColor($vanillaHeader_fg, $global-color_primary, 20%) !default;
$vanillaMenu-register_bg: $global-color_bg !default;
$vanillaMenu-register_bg_hover: rgba($global-color_bg, 0.9) !default;

/* -------------------------------------------------------------- *\
    Compact Me Box
\* -------------------------------------------------------------- */

$compactMeBox-tab_height: 44px !default;

/* -------------------------------------------------------------- *\
    Footer
\* -------------------------------------------------------------- */

$global-footer_height: 50px !default;

/* -------------------------------------------------------------- *\
    user content
\* -------------------------------------------------------------- */

$userContent-list_margin: 2em;
$userContent-listDecoration_minWidth: 2em;

/* -------------------------------------------------------------- *\
    Etc
\* -------------------------------------------------------------- */

$mark_bg: mix($global-color-primary, $global-color-bg, 22%);
